<template>
    <div v-if="show_show" class="player" :class="player_class">
        <!--S视频-->
        <video
                id="video"
                ref="video"
                :src="src"
                :poster="poster"
                autoplay="true"
                loop
                x5-video-player-type="h5-page"
                webkit-playsinline
                playsinline
                @loadedmetadata="initVideo"
                @play="startPlay"
        >
        </video>
        <!--E视频-->

        <!--S关闭-->
        <div id="close" @click="$emit('close')">
            <i class="iconfont icon-guanbi"></i>
        </div>
        <!--E关闭-->

        <!--S播放按钮-->
        <div v-if="player_button" id="player-button" @click="clickPlayer">
            <svg><use xlink:href="#icon-zanting"></use></svg>
        </div>
        <!--E播放按钮-->
    </div>
</template>

<script>
export default {
    name: "Player",
    data() {
      return {
          player_class: 'hide',
          show_show: false,
          // 播放状态 stop 未播放 player 播放中
          status: 'stop',
          // 是否显示播放按钮
          player_button: true
      }
    },
    props: {
        // 是否显示
        is_show: {
          type: Boolean,
          default: false
        },
        // 播放视频地址
        src: {
            type: String,
            default:''
        },
        // 视频封面
        poster: {
            type: String,
            default: ''
        }
    },
    watch: {
        is_show(value) {
            if(value === true){
                this.show_show = true
            } else {
                this.player_class = 'hide'
                this.player_button = true
                setTimeout(() => {
                    this.show_show = false
                },110)
            }
        }
    },
    methods: {
        /**
         * 加载视频完成
         */
        initVideo() {
            this.$refs.video.play()
            this.player_class = 'show'
            this.$emit('start-play')
        },
        /**
         * 视频开始播放
         */
        startPlay() {
            this.player_button = false
        },
        /**
         * 点击播放
         */
        clickPlayer() {
            this.$refs.video.play()
            this.player_button = false
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .player{
        position: absolute;
        left:0;
        top:0;
        width: 375px;
        height: 100%;
        background: rgba(0,0,0,.5);
        transition: .2s;
        &.show{
            transform: scale(1);
        }
        &.hide{
            transform: scale(0);
        }
        #video{
            width: 100%;
            height: 100%;
        }
        #close{
            position: absolute;
            z-index: 2;
            left:10px;
            top:10px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            i{
                color: #fff;
                font-size: @font-huge;
            }
        }
        #player-button{
            position: absolute;
            z-index: 1;
            width: 375px;
            height: 100%;
            left:0;
            top:0;
            background: rgba(0,0,0,0);
            svg{
                position: absolute;
                left:152.5px;
                top:50%;
                transform: translateY(-50%);
                width: 70px;
                height: 70px;
                display: block;
            }
        }
    }
</style>
